<template>
	<view class="y-flex">
		<view class="y-flex audio-progress position-relative" :style="{'background-color': skinColor.color_3}">
			<view class="position-absolute-cover" :style="{'background-color': skinColor.color_red, 'width': width + 'px'}"></view>
		</view>
		<view class="audio-line y-flex y-row y-align-center page-padding-gap"
		:style="{'background-color': skinColor.color_bg_1}" @tap="showPlayer">
			<view class="audio-poster position-relative mr-40">
				<find-image v-if="poster" class="audio-poster" border-radius="100" :src="poster" mode="aspectFill"></find-image>
				<view class="position-absolute-cover y-flex y-align-center y-justify-center bg-dark-mask border-radius-100" @tap.stop="toggle">
					<com-icon :name="paused ? 'play_fill' : 'stop'" :color="skinColor.color_white" size="50"></com-icon>
				</view>
			</view>
			<view class="y-flex y-flex-1 mr-20">
				<text class="fs-28 lines-1" :style="{color: skinColor.color_1}">{{title}}</text>
				<text class="fs-24 mt-20 lines-1" :style="{color: skinColor.color_3}">{{creator}}</text>
			</view>
			<com-icon name="notification_fill" :color="skinColor.color_1" size="45" @click.stop="handleShowVolume"></com-icon>
			<com-icon class="ml-40" name="play_list" :color="skinColor.color_1" size="60" @click.stop="showPlaylist"></com-icon>
		</view>
		<com-gap height="50" :color="skinColor.color_bg_1" v-if="lyricShow"></com-gap>
		<com-safe-bottom></com-safe-bottom>
	</view>
</template>

<script>
	import SkinColor from '@/assets/skin/index.js'
	import FindImage from './Image.vue'
	export default {
		inject: ['getWindowWidth', 'showVolume', 'showAudioPlayer'],
		components: {FindImage},
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			skinColor () {
				return SkinColor[this.skinMode]
			},
			windowWidth () {
				return this.getWindowWidth()
			},
			paused () {
				return this.$store.getters['audio/GET_PAUSED']
			},
			src () {
				return this.$store.getters['audio/GET_CURRENT_SRC']
			},
			creator () {
				return this.$store.getters['audio/GET_CURRENT_CREATOR']
			},
			title () {
				return this.$store.getters['audio/GET_CURRENT_TITLE']
			},
			poster () {
				return this.$store.getters['audio/GET_CURRENT_POSTER']
			},
			currentTime () {
				return this.$store.getters['audio/GET_CURRENT_TIME']
			},
			duration () {
				return this.$store.getters['audio/GET_DURATION']
			},
			width () {
				return (this.currentTime / this.duration) * this.windowWidth
			}
		},
		methods: {
			//播放和暂停
			toggle (e) {
				e.stopPropagation && e.stopPropagation()
				if ( this.paused ) {
					uni.$emit('play')
				} else {
					uni.$emit('pause')
				}
			},
			showPlaylist (e) {
				e.stopPropagation && e.stopPropagation()
				uni.navigateTo({
					url: '/pages/find/audio/playlist',
					animationType: 'fade-in'
				})
			},
			handleShowVolume (e) {
				e.stopPropagation && e.stopPropagation()
				this.showVolume()
			},
			//展示播放界面
			showPlayer () {
				this.showAudioPlayer()
			}
		}
	}
</script>

<style>
	.audio-progress {
		height: 1px;
	}
	.audio-line {
		height: 140rpx;
	}
	.audio-line .audio-poster {
		width: 100rpx;
		height: 100rpx;
	}
</style>